/*
 * @author: yang long
 * @description: 给元素节点添加属性
 * @element {type}: 要添加属性的节点
 * @virtualDOM {type}: 虚拟dom
 * @oldVirtualDOM {type}: 老的 虚拟dom
 */
export default function updateElementNode(element, virtualDOM, oldVirtualDOM = {}) {
  const newProps = virtualDOM.props || {};
  const oldProps = oldVirtualDOM.props || {};

  // 这里走添加和更新操作，除了事件，其他的添加会覆盖老的，就等于更新了
  Object.keys(newProps).forEach((propName) => {
    const newPropValue = newProps[propName];
    const oldPropValue = oldProps[propName];

    if (newPropValue !== oldPropValue) {
      // 判断是不是事件
      if (propName.slice(0, 2) === 'on') {
        // 获取绑定事件的名称  onClick -> click
        const eventName = propName.toLocaleLowerCase().slice(2);
        // 添加事件
        element.addEventListener(eventName, newPropValue);
        if (oldPropValue) {
          // 更新事件需要移除之前的事件
          element.removeEventListener(eventName, oldPropValue);
        }
      } else if (propName === 'value' || propName === 'checked') {
        // value 和 checked 属性需要特殊处理
        element[propName] = newPropValue;
      } else if (propName !== 'children') {
        // 添加其他属性
        if (propName === 'className') {
          element.setAttribute('class', newPropValue);
        } else {
          element.setAttribute(propName, newPropValue);
        }
      }
    }
  });

  // 这里走删除操作，老属性有，新属性没有的时候就走这里
  Object.keys(oldProps).forEach((propName) => {
    const newPropValue = newProps[propName];
    const oldPropValue = oldProps[propName];

    if (!newPropValue) {
      // 判断是不是事件
      if (propName.slice(0, 2) === 'on') {
        const eventName = propName.toLocaleLowerCase().slice(2);
        // 删除逻辑
        element.removeEventListener(eventName, oldPropValue);
      } else if (propName !== 'children') {
        // 删除其他属性
        if (propName === 'className') {
          element.removeAttribute('class');
        } else {
          element.removeAttribute(propName);
        }
      }
    }
  });
}
